UserScript:Zen Mode

code:scriptxx.js

scrapbox.PageMenu.addItem({

title: 'Zen Mode',

onClick: () => {

$('div .page-menu').toggleClass("page-menu-zen-mode");

$('.col-page').toggleClass("col-page-zen-mode");

$('.col-page').toggleClass("full-height");

$('.col-page-side').toggleClass("col-page-side-zen-mode");

$('.col-page-side').toggleClass("opacity-zero");

$('nav').toggleClass("opacity-zero");

$('nav').toggleClass("thin");

$('.related-page-list').toggleClass('opacity-zero');

$('.related-page-list').toggleClass('thin');

$('.quick-launch').toggleClass('opacity-zero');

$('.quick-launch').toggleClass('thin');

$('.telomere').toggleClass('opacity-zero');

}

})

code:style.css

.full-height {

height:100% !important;

}

.opacity-zero:not(:hover) {

opacity:0;

}

.thin:not(:hover) {

max-height:3px;

min-height:0px !important;

margin:0px !important;

}

.col-page-side-zen-mode {

width:3px;

}

.col-page-side-zen-mode:hover {

width:66px;

}

.page-menu-zen-mode {

overflow:visible;

}

.col-page-zen-mode {

width: 100% !important;

max-width:100%;

}

別の実装かな？

code:script.js

/*zen mode*/

scrapbox.PageMenu.addItem({

title: 'Zen mode',

onClick: e => {

var bg = '#EEEEEE' // ここにお好きな背景色を入れてね（テーマの背景が黒なら black で）

var style = document.getElementById('__zen__')

if (style) { style.remove(); e.currentTarget.innerText = 'Zen mode'; return }

else e.currentTarget.innerText = String.fromCharCode(0x02713) + ' Zen mode'

'.navbar:not(:hover), .line .telomere:not(:hover), .col-page-side:not(:hover) { opacity:0 }'

style = document.createElement('style')

style.setAttribute('id', '__zen__')

style.appendChild(document.createTextNode(css))

document.head.appendChild(style)

}

})

UserScript.icon

UserCSS.icon

https://img.shields.io/badge/JavaScript-UserScript_Zen_Mode-F7DF1E.svg?logo=javascript&style=for-the-badge